<template>
    <div class="table_box_hy">
      <div class="zntz_title">站内通知</div>
      <div class="zntz_xl">
        <span>分类筛选</span>
        <el-select
          v-model="formdata.search"
          placeholder="请选择"
          size="small"
          @change="onChange()"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="zntz_nr_box">
        <div
          class="zntz_nr"
          @click="handleClick(item)"
          v-for="(item, index) in list"
          :key="index"
          @mouseenter="handleMouseEnter(index)"
          @mouseleave="handleMouseLeave(index)"
        >
          <div
            class="zntz_nr_item"
            :ref="`inrboxtem-${index}`"
            :style="{ color: item.view_status == 1 ? '#a39d9d' : '' }"
          >
            <!-- •机构备案、会员入会与机构登记服务流程机构备案、会员入会与机构登记服务流程机构备案、会员入会与机构登记服务流程得得得得得得 -->
            <span> • </span>
            <span>{{ item.title }}</span>
            <span style="float: right;"> {{ item.createtime }}</span>
          </div>
          <div
            class="zntz_nr_button"
            :class="{ zntz_nr_button_yd: item.view_status == 1 }"
            :ref="`buttonbox-${index}`"
          >
            <span v-if="item.view_status == 0">未读</span>
            <span v-else>已读</span>
          </div>
        </div>
        <div class="pagination_hy">
          <el-pagination
            hide-on-single-page
            background
            :pager-count="5"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="formdata.currentPage"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </template>
    <script>
  export default {
    data() {
      return {
        options: [
          {
            value: "system",
            label: "系统通知",
          },
          {
            value: "fee",
            label: "缴费",
          },
          {
            value: "meet",
            label: "会议",
          },
          {
            value: "question",
            label: "调查问卷",
          },
          {
            value: "education",
            label: "继续教育",
          },
          {
            value: "credit",
            label: "资信评级",
          },
        ],
        list: [],
        formdata: {
          type: 3,
          search: "",
          currentPage: 1,
        },
        total: 0,
      };
    },
    mounted() {
      this.getinfo();
    },
    methods: {
      /**
       * 下拉框搜索
       */
      onChange() {
        // console.log(this.formdata.search);
        this.formdata.currentPage = 1
        this.getinfo();
      },
      /**
       * 鼠标移入效果
       * @param {DOM元素的下标} index
       */
      handleMouseEnter(index) {
        let i = `inrboxtem-${index}`;
        const elem = this.$refs[i][0]; // 获取DOM元素
        elem.classList.add("hover_nr"); // 添加class
        let a = `buttonbox-${index}`;
        const ele = this.$refs[a][0];
        ele.classList.add("hover_button");
      },
      /**
       * 鼠标移出效果
       * @param {DOM元素的下标} index
       */
      handleMouseLeave(index) {
        let i = `inrboxtem-${index}`;
        const elem = this.$refs[i][0];
        elem.classList.remove("hover_nr");
        let a = `buttonbox-${index}`;
        const ele = this.$refs[a][0];
        ele.classList.remove("hover_button"); // 移除class
      },
      /**
       * 分页
       * @param {页码} page
       */
      handleCurrentChange(page) {
        // 当分页发生变化时的处理函数
        this.formdata.page = page;
        this.getinfo();
      },
      /**
       * 获取列表
       */
      getinfo() {
        let that = this;
        let data = that.formdata;
        that.$http.post("notice/list", data).then((res) => {
          if (res.code === 1) {
            that.total = res.data.total;
            that.list = res.data.data;
          } else {
            that.total = 0;
            that.list = [];
          }
        });
      },
      /**
       * 跳转详情
       */
      handleClick(e) {
        // console.log(e)
        this.$router.push({ path: "/zjzntzxq_1", query: { id: e.id } });
      },
      //  ==
    },
  };
  </script>
    <style>
  .zntz_title {
    height: 0.5rem;
    background: #1954a4;
    padding-left: 0.3375rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
    font-weight: bold;
    color: #ffffff;
  }
  .zntz_xl {
    font-size: 0.2rem;
    font-weight: 400;
    color: #333333;
    height: 1.0375rem;
    display: flex;
    align-items: center;
    border-bottom: 0.025rem dotted #ddd;
  }
  .zntz_xl > span {
    margin-right: 0.2rem;
  }
  .zntz_nr_box {
    font-size: 0.2rem;
    font-weight: 400;
    color: #333333;
  }
  .zntz_nr {
    height: 0.8375rem;
    border-bottom: 0.025rem dotted #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.0625rem;
    cursor: pointer;
  }
  
  .zntz_nr_button {
    width: 1.375rem;
    height: 0.4625rem;
    border: 1.5px solid #1954a4;
    border-radius: 0.075rem;
    text-align: center;
    line-height: 0.4625rem;
    color: #1954a4;
    cursor: pointer;
  }
  .zntz_nr_button_yd {
    border: 1.5px solid #ddd;
    color: #a39d9d;
  }
  .zntz_nr_item {
    width: 11.25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hover_nr {
    color: #1954a4;
  }
  .hover_button {
    color: #ffffff;
    background: #1954a4;
  }
  .yuand {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0000;
  }
  </style>